<template>
  <div>
    <a-spin tip="Loading..." :spinning="false">
      <a-input-search v-model="searchValue" style="margin-bottom: 1px" placeholder="请输入" />
      <a-empty v-if="filterTreeData.length === 0"></a-empty>
      <a-tree
        v-else
        :class="treeScreenClass"
        :treeData="filterTreeData"
        :checkStrictly="checkStrictly"
        @select="onSelect"
        @expand="onExpand"
        :autoExpandParent="autoExpandParent"
        :expandedKeys="expandedKeys"
      >
      </a-tree>
    </a-spin>
  </div>
</template>

<script>
import { lhAreaTree } from '@/api/xlgc/videoManage.js'
export default {
  name: 'JSelectDepartModal',
  props: ['rootOpened', 'departId', 'store', 'text'],
  data() {
    return {
      treeData: [],
      autoExpandParent: true,
      defaultExpandAll: true,
      expandedKeys: [],
      dataList: [],
      searchValue: '',
      checkStrictly: true
    }
  },
  created() {
    this.loadArea()
  },
  watch: {
    departId() {
      this.initDepartComponent()
    }
  },
  computed: {
    treeScreenClass() {
      return {
        'my-dept-select-tree': true,
        fullscreen: this.fullscreen
      }
    },
    filterTreeData() {
      if (!this.searchValue) {
        return this.treeData
      }
      let filter = []
      this.dataList.forEach(item => {
        if (item.title.includes(this.searchValue)) {
          filter.push(Object.assign({}, item, { children: null, isLeaf: true }))
        }
      })
      return filter
    }
  },
  methods: {
    loadArea() {
      // 这个方法是找到所有的部门信息
      lhAreaTree().then(res => {
        if (res.success) {
          let arr = [...res.result]
          this.reWriterWithSlot(arr)
          this.treeData = arr
          console.log(this.treeData)
          this.initDepartComponent()
          if (this.rootOpened) {
            this.initExpandedKeys(res.result)
          }
        }
      })
    },
    initDepartComponent(flag) {
      let arr = []
      // 该方法两个地方用 1.visible改变事件重新设置选中项 2.组件编辑页面回显
      let fieldName = flag == true ? 'key' : this.text
      if (this.departId) {
        let arr2 = this.departId.split(',')
        for (let item of this.dataList) {
          if (arr2.indexOf(item[this.store]) >= 0) {
            arr.push(item[fieldName])
          }
        }
      }
      if (flag == true) {
        // this.checkedKeys = [...arr]
      } else {
        this.$emit('initComp', arr.join(','))
      }
    },
    reWriterWithSlot(arr) {
      for (let item of arr) {
        item.title = item.areaName
        if (item.children && item.children.length > 0) {
          item.title = item.areaName
          this.reWriterWithSlot(item.children)
          let temp = Object.assign({}, item)
          temp.children = {}
          this.dataList.push(temp)
        } else {
          this.dataList.push(item)
          item.scopedSlots = { title: 'title' }
        }
      }
    },
    // 打开根节点
    initExpandedKeys(arr) {
      // console.log("arr")
      // console.log(arr)
      if (arr && arr.length > 0) {
        let keys = []
        for (let item of arr) {
          if (item.children && item.children.length > 0) {
            keys.push(item.areaCode)
          }
        }
        this.expandedKeys = [...keys]
        // 全部keys
        // this.allTreeKeys = [...keys]
      } else {
        this.expandedKeys = []
        // this.allTreeKeys = []
      }
    },
    onSelect(selectedKeys, info) {
      console.log(selectedKeys)
      console.log(info)
      // 取消关联的情况下才走onSelect的逻辑
      if (this.checkStrictly) {
        let keys = []
        keys.push(selectedKeys[0])
      }
      let areaCode = info.selectedNodes[0].data.props.areaCode
      this.$emit('selectItem', areaCode)
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    getParentKey(currKey, treeData) {
      let parentKey
      for (let i = 0; i < treeData.length; i++) {
        const node = treeData[i]
        if (node.children) {
          if (node.children.some(item => item.key === currKey)) {
            parentKey = node.key
          } else if (this.getParentKey(currKey, node.children)) {
            parentKey = this.getParentKey(currKey, node.children)
          }
        }
      }
      return parentKey
    },
    isFullscreen(val) {
      this.fullscreen = val
    }
  }
}
</script>

<style lang="less" scoped>
// 限制部门选择树高度，避免部门太多时点击确定不便
.my-dept-select-tree {
  height: 500px;
  // height: calc(100vh - 250px);
  overflow-y: scroll;
}
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
